<template>
  <a-drawer title="菜单详细信息" :width="900" :bodyStyle="{ padding: '18px' }" :visible="visible" @close="() => (visible = false)">
    <a-skeleton active :paragraph="{ rows: 6 }" :loading="loading">
      <template v-if="info">
        <a-descriptions>
          <a-descriptions-item label="菜单名称">{{ info.title }}</a-descriptions-item>
          <a-descriptions-item label="路由名称">{{ info.name }}</a-descriptions-item>
          <a-descriptions-item label="父级菜单">{{ info.parentMenu || '一级菜单'}}</a-descriptions-item>

          <a-descriptions-item label="菜单图标">
            <a-icon v-if="info.icon" :type="info.icon" />
          </a-descriptions-item>
          <a-descriptions-item label="打开方式">{{ info.target == '_blank' ? '打开新窗口' : info.target == '' ? '站内跳转' : info.target  }}</a-descriptions-item>
          <a-descriptions-item label="菜单状态">{{ info.status ? '启用' : '停用'  }}</a-descriptions-item>

          <a-descriptions-item label="菜单隐藏">{{ info.hide? '隐藏' : '关闭' }}</a-descriptions-item>
          <a-descriptions-item label="缓存页面">{{ info.keep? '开启' : '关闭' }}</a-descriptions-item>
          <a-descriptions-item label="菜单排序">{{ info.sort }}</a-descriptions-item>

          <a-descriptions-item label="创建时间">{{ info.created }}</a-descriptions-item>
          <a-descriptions-item label="更新时间">{{ info.updated }}</a-descriptions-item>
          <a-descriptions-item label="操作人">{{ info.who }}</a-descriptions-item>

          <a-descriptions-item label="url地址" :span="3">{{ info.url }}</a-descriptions-item>
          <a-descriptions-item label="备注" :span="3">{{ info.remark }}</a-descriptions-item>
        </a-descriptions>
        <br>
        <a-card v-if="!isparent" title="菜单操作权限" size="small">
          <a-button slot="extra" type="primary" :loading="tableLoading" @click="$refs.form.create()">添加</a-button>
          <a-table rowKey="id" size="middle" :loading="tableLoading" :columns="columns" :dataSource="info.menuAuths" :pagination="false">
            <a-descriptions slot="expandedRowRender" slot-scope="record" size="small" :column="2">
              <a-descriptions-item label="权限ID">{{ record.id }}</a-descriptions-item>
              <a-descriptions-item label="状态">{{ record.status ? '启用' : '停用'  }}</a-descriptions-item>
              <a-descriptions-item label="权限指令">{{ record.directive }}</a-descriptions-item>
              <a-descriptions-item label="创建时间">{{ record.created }}</a-descriptions-item>
              <a-descriptions-item label="操作人">{{ record.who }}</a-descriptions-item>
              <a-descriptions-item label="更新时间">{{ record.updated }}</a-descriptions-item>
              <a-descriptions-item label="备注" :span="2">{{ record.remark }}</a-descriptions-item>
            </a-descriptions>
            <!-- 状态 -->
            <template slot="status" slot-scope="t,r">
              <a-switch :defaultChecked="Boolean(t)" checkedChildren="启用" unCheckedChildren="停用" @change="onChange(r.id,$event)" />
            </template>
            <div slot="action" class="table-action" slot-scope="text,record,index">
              <a @click.stop="$refs.form.update(record)">修改</a>
              <a-divider type="vertical" />
              <a @click.stop="onDelete(record,index)" class="delete">删除</a>
            </div>
            <a-tooltip slot="tip" slot-scope="text" placement="topLeft" class="sjht-cursor" v-if="text" :title="text">{{text}}</a-tooltip>
          </a-table>
          <sjht-menu-auth-form ref="form" :menu="info" @success="success" />
        </a-card>
      </template>
      <a-empty v-else />
    </a-skeleton>
  </a-drawer>
</template>
<script>
import { GetDetail, UpdateMenuAuthSelective, DeleteMenuAuth } from '@/api/manage/menu'
import { Skeleton, Empty } from 'ant-design-vue'
import SjhtMenuAuthForm from './menuAuthForm'
export default {
  name: 'SjhtMenuDetail', //菜单详情
  components: {
    [Empty.name]: Empty,
    [Skeleton.name]: Skeleton,
    [SjhtMenuAuthForm.name]: SjhtMenuAuthForm
  },
  data() {
    return {
      visible: false, //是否显示
      loading: false, //是否加载
      isparent: false, //是否为父级菜单，如果是父级菜单就不需要操作[菜单操作权限]
      info: null, //菜单详情信息
      tableLoading: false,
      columns: [
        { title: '权限名称', dataIndex: 'name', width: 90, ellipsis: true, scopedSlots: { customRender: 'tip' } },
        { title: '权限key', dataIndex: 'auth', width: 100, ellipsis: true, scopedSlots: { customRender: 'tip' } },
        { title: '接口地址', dataIndex: 'api', width: 280, ellipsis: true, scopedSlots: { customRender: 'tip' } },
        { title: '状态', dataIndex: 'status', width: 75, align: 'center', scopedSlots: { customRender: 'status' } },
        { title: '操作', key: 'operation', width: 90, align: 'center', scopedSlots: { customRender: 'action' } }
      ]
    }
  },
  methods: {
    show(rec) {
      this.visible = true
      if (this.loading) return
      this.loading = true // 加载数据
      GetDetail(rec.id)
        .then(res => {
          this.info = res //menuAuths:操作权限列表
          this.isparent = rec?.children?.length > 0 //判断是否为父级菜单
        })
        .catch(err => {
          this.info = null
          this.$message.error(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    //删除
    onDelete(rec, index) {
      this.$confirm({
        title: '确定删除操作权限吗？',
        content: `删除【${rec.name}】菜单操作权限，请谨慎操作。`,
        okType: 'danger',
        onOk: () => {
          const { $message } = this
          this.tableLoading = true
          return DeleteMenuAuth({ id: rec.id })
            .then(() => {
              this.info.menuAuths.splice(index, 1)
              $message.success('删除成功')
            })
            .catch(err => {
              $message.error(err)
            })
            .finally(() => {
              this.tableLoading = false
            })
        }
      })
    },
    //保存成功的回调
    success(rec) {
      const {
        info: { menuAuths }
      } = this
      const index = menuAuths.findIndex(x => x.id === rec.id)
      if (index > -1) menuAuths.splice(index, 1, rec)
      else menuAuths.push(rec)
    },
    // 更改状态 启用/停用
    onChange(id, checked) {
      this.loading = true
      const { dataSource, $message } = this
      const data = checked ? 1 : 0
      UpdateMenuAuthSelective({ id, status: data })
        .then(res => {
          if (res) {
            const index = dataSource.findIndex(x => x.id === id)
            if (index > -1) {
              const record = dataSource[index]
              Object.assign(record, { status: data })
              dataSource.splice(index, 1, record)
            }
            $message.success('修改成功')
          } else $message.error('修改失败')
        })
        .catch(err => {
          $message.error(err)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>